<html>

<head>
    <!--
        WebGL stencil shadow demo

        Copyright:
        Arno van der Vegt, 2011  

        Contact:
        legoasimo@gmail.com

        Licence:  
        Creative Commons Attribution/Share-Alike license
        http://creativecommons.org/licenses/by-sa/3.0/

        The WebGL setup code was provided by: http://learningwebgl.com
    -->
    <title>Stencil shadow demo</title>
    <script type="text/javascript" src="http://derekliu.blog.51cto.com/attachment/201206/4479510_1338947381.jpg"></script>
    <script type="text/javascript" src="http://derekliu.blog.51cto.com/attachment/201206/4479510_1338947392.jpg"></script>
    <script type="text/javascript" src="http://derekliu.blog.51cto.com/attachment/201206/4479510_1338947403.jpg"></script>

    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif

        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;
        varying vec4 vColor;

        uniform sampler2D uSampler;
        uniform bool uUseLighting;
        uniform bool uUseColor;
        uniform float uAlpha;

        void main(void) {
            if (!uUseColor) {
                vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
                if (!uUseLighting) {
                    gl_FragColor = vec4(textureColor.rgb, textureColor.a);
                }
                else {
                    gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
                }
            }
            else {
                gl_FragColor = vColor * uAlpha;
            }
        }
    </script>

    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec3 aVertexNormal;
        attribute vec2 aTextureCoord;

        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        uniform mat3 uNMatrix;

        uniform vec3 uAmbientColor;

        uniform vec3 uLightingLocation;
        uniform vec3 uLightingColor;

        uniform bool uUseLighting;
        uniform bool uUseColor;

        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;

        varying vec4 vColor;

        attribute vec4 aVertexColor;

        void main(void) {
            if (!uUseColor) {
                vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
                gl_Position = uPMatrix * mvPosition;
                vTextureCoord = aTextureCoord;

                if (!uUseLighting) {
                    vLightWeighting = vec3(0.4, 0.4, 0.4);
                }
                else {
                    vec3 lightDirection = normalize(uLightingLocation - mvPosition.xyz);

                    vec3 transformedNormal = uNMatrix * aVertexNormal;
                    float directionalLightWeighting = max(dot(transformedNormal, lightDirection), 0.0);
                    vLightWeighting = uAmbientColor + uLightingColor * directionalLightWeighting;
                }
            }
            else {
                gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
                vColor = aVertexColor;
            }
        }
    </script>
</head>

<body onload="webGLStart();">
    <div>
        <canvas id="demoCanvas" style="border:none;" width="640" height="480"></canvas>
    </div>
</body>

</html>